<!DOCTYPE html>
<!-- saved from url=(0028)http://jssdk.demo.qiniu.io/# -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>七牛云存储 - JavaScript SDK</title>
	<link href="http://jssdk.demo.qiniu.io/favicon.ico" rel="shortcut icon">
	<link rel="stylesheet" href="http://jssdk.demo.qiniu.io/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="http://jssdk.demo.qiniu.io/main.css">
	<link rel="stylesheet" href="http://jssdk.demo.qiniu.io/js/highlight/highlight.css">

	<!--[if lt IE 9]>
      <script src="js/Respond-1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="">
<div class="container">
	<div class="text-left col-md-12 wrapper">
		<h1 class="text-left col-md-12 ">
			七牛云存储 - JavaScript SDK
            <a class="btn btn-default view_code" id="show_code">
                查看初始化代码
            </a>
            <a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank">
				<img src="./七牛云存储 - JavaScript SDK_files/GitHub-Mark-32px.png">
				View Source on Github
			</a>
		</h1>
        <input type="hidden" id="domain" value="http://7x00bz.com1.z0.glb.clouddn.com/">
        <input type="hidden" id="uptoken_url" value="/serve/qiniu/uptoken">
		<ul class="tip col-md-12 text-mute">
			<li>
				<small>
					JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
				</small>
			</li>
			<li>
				<small>临时上传的空间不定时清空，请勿保存重要文件。</small>
			</li>
            <li>
                <small>Html5模式大于4M文件采用分块上传。</small>
            </li>
            <li>
                <small>上传图片可查看处理效果。</small>
            </li>
			<li>
				<small>本示例限制最大上传文件100M。</small>
			</li>
		</ul>
    </div>
    <div class="body">
        <div class="col-md-12">
            <div id="container" style="position: relative;">
                <a class="btn btn-default btn-lg " id="pickfiles" href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" style="position: relative; z-index: 1;">
                    <i class="glyphicon glyphicon-plus"></i>
                    <sapn>选择文件</sapn>
                </a>
            <div id="html5_19fp2uaaq10112rg129918gp1i0n3_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 167px; height: 45px; overflow: hidden; z-index: 0;"><input id="html5_19fp2uaaq10112rg129918gp1i0n3" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept=""></div></div>
        </div>

        <div style="display: block;" id="success" class="col-md-12">
            <div class="alert-success">
                队列全部文件处理完毕
            </div>
        </div>
        <div class="col-md-12 ">
            <table class="table table-striped table-hover text-left" style="margin-top: 40px;">
                <thead>
                  <tr>
                    <th class="col-md-4">Filename</th>
                    <th class="col-md-2">Size</th>
                    <th class="col-md-6">Detail</th>
                  </tr>
                </thead>
                <tbody id="fsUploadProgress">
                <tr id="o_19fp3tiol13vp19c52fa1leg1vfj9" class="progressContainer" style="opacity: 1;"><td class="progressName">main.js<div class="Wrapper default"><div class="imgWrapper col-md-3"><img src="./七牛云存储 - JavaScript SDK_files/default.png"></div></div></td><td class="progressFileSize">7 KB</td><td><div class="info"><div class=""><div><strong>Link:</strong><a href="http://qiniu-plupload.qiniudn.com/main.js" target="_blank"> http://qiniu-plupload.qiniudn.com/main.js</a></div><div class="hash"><strong>Hash:</strong>Fo79uNNbdEJXRlJfn8h95ZFc5qnD</div></div><a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" class="progressCancel" style="display: none;"></a><div class="status text-left" style="display: none;">已上传: 7 KB 上传速度： 23 KB/s</div></div></td></tr><tr id="o_19fp3v9s61i0d1suh1m2o1r5j1m45e" class="progressContainer" style="opacity: 1;"><td class="progressName">js-sdk-1.0.4-beta.zip<div class="Wrapper default"><div class="imgWrapper col-md-3"><img src="./七牛云存储 - JavaScript SDK_files/default.png"></div></div></td><td class="progressFileSize">584 KB</td><td><div class="info"><div class=""><div><strong>Link:</strong><a href="http://qiniu-plupload.qiniudn.com/js-sdk-1.0.4-beta.zip" target="_blank"> http://qiniu-plupload.qiniudn.com/js-sdk-1.0.4-beta.zip</a></div><div class="hash"><strong>Hash:</strong>FrAx7e-hyusBXCluDm-f5Qiw2HiH</div></div><a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" class="progressCancel" style="display: none;"></a><div class="status text-left" style="display: none;">已上传: 584 KB 上传速度： 216 KB/s</div></div></td></tr></tbody>
            </table>
        </div>
    </div>
    <div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
          </div>
          <div class="modal-body">
            <pre><code class="javascript">
            <span class="comment">//引入Plupload 、qiniu.js后</span>

            <span class="keyword">var</span> uploader = Qiniu.uploader({
                runtimes: <span class="string">'html5,flash,html4'</span>,    <span class="comment">//上传模式,依次退化</span>
                browse_button: <span class="string">'pickfiles'</span>,       <span class="comment">//上传选择的点选按钮，**必需**</span>
                uptoken_url: <span class="string">'/token'</span>,            <span class="comment">//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）</span>
                <span class="comment">// uptoken : '<your upload="" token="">', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成</your></span><your upload="" token="">
                <span class="comment">// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。</span>
                <span class="comment">// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理</span>
                domain: <span class="string">'http://qiniu-plupload.qiniudn.com/'</span>,   <span class="comment">//bucket 域名，下载资源时用到，**必需**</span>
                container: <span class="string">'container'</span>,           <span class="comment">//上传区域DOM ID，默认是browser_button的父元素，</span>
                max_file_size: <span class="string">'100mb'</span>,           <span class="comment">//最大文件体积限制</span>
                flash_swf_url: <span class="string">'js/plupload/Moxie.swf'</span>,  <span class="comment">//引入flash,相对路径</span>
                max_retries: <span class="number">3</span>,                   <span class="comment">//上传失败最大重试次数</span>
                dragdrop: <span class="literal">true</span>,                   <span class="comment">//开启可拖曳上传</span>
                drop_element: <span class="string">'container'</span>,        <span class="comment">//拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传</span>
                chunk_size: <span class="string">'4mb'</span>,                <span class="comment">//分块上传时，每片的体积</span>
                auto_start: <span class="literal">true</span>,                 <span class="comment">//选择文件后自动上传，若关闭需要自己绑定事件触发上传</span>
                init: {
                    <span class="string">'FilesAdded'</span>: <span class="keyword">function</span>(up, files) {
                        plupload.each(files, <span class="keyword">function</span>(file) {
                            <span class="comment">// 文件添加进队列后,处理相关的事情</span>
                        });
                    },
                    <span class="string">'BeforeUpload'</span>: <span class="keyword">function</span>(up, file) {
                           <span class="comment">// 每个文件上传前,处理相关的事情</span>
                    },
                    <span class="string">'UploadProgress'</span>: <span class="keyword">function</span>(up, file) {
                           <span class="comment">// 每个文件上传时,处理相关的事情</span>
                    },
                    <span class="string">'FileUploaded'</span>: <span class="keyword">function</span>(up, file, info) {
                           <span class="comment">// 每个文件上传成功后,处理相关的事情</span>
                           <span class="comment">// 其中 info 是文件上传成功后，服务端返回的json，形式如</span>
                           <span class="comment">// {</span>
                           <span class="comment">//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",</span>
                           <span class="comment">//    "key": "gogopher.jpg"</span>
                           <span class="comment">//  }</span>
                           <span class="comment">// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html</span>

                           <span class="comment">// var domain = up.getOption('domain');</span>
                           <span class="comment">// var res = parseJSON(info);</span>
                           <span class="comment">// var sourceLink = domain + res.key; 获取上传成功后的文件的Url</span>
                    },
                    <span class="string">'Error'</span>: <span class="keyword">function</span>(up, err, errTip) {
                           <span class="comment">//上传出错时,处理相关的事情</span>
                    },
                    <span class="string">'UploadComplete'</span>: <span class="keyword">function</span>() {
                           <span class="comment">//队列文件处理完毕后,处理相关的事情</span>
                    },
                    <span class="string">'Key'</span>: <span class="keyword">function</span>(up, file) {
                        <span class="comment">// 若想在前端对每个文件的key进行个性化处理，可以配置该函数</span>
                        <span class="comment">// 该配置必须要在 unique_names: false , save_key: false 时才生效</span>

                        <span class="keyword">var</span> key = <span class="string">""</span>;
                        <span class="comment">// do something with key here</span>
                        <span class="keyword">return</span> key
                    }
                }
            });

            <span class="comment">// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置-&gt;基本设置-&gt;域名设置"查看获取</span>

            <span class="comment">// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs</span>
            </your></code></pre>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">图片效果查看</h4>
          </div>
          <div class="modal-body">
            <div class="modal-body-wrapper text-center">
                <a href="" target="_blank">
                    <img src="" alt="" data-key="" data-h="">
                </a>
            </div>
            <div class="modal-body-footer">
                <div class="watermark">
                    <span>水印控制：</span>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-watermark="NorthWest" class="btn btn-default">
                        左上角
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-watermark="SouthWest" class="btn btn-default">
                        左下角
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-watermark="NorthEast" class="btn btn-default">
                        右上角
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-watermark="SouthEast" class="btn btn-default disabled">
                        右下角
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-watermark="false" class="btn btn-default">
                        无水印
                    </a>
                </div>
                 <div class="imageView2">
                    <span>缩略控制：</span>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imageview="large" class="btn btn-default disabled">
                        大缩略图
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imageview="middle" class="btn btn-default">
                        中缩略图
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imageview="small" class="btn btn-default">
                        小缩略图
                    </a>
                </div>
                <div class="imageMogr2">
                    <span>高级控制：</span>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imagemogr="left" class="btn btn-default no-disable-click">
                        逆时针
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imagemogr="right" class="btn btn-default no-disable-click">
                        顺时针
                    </a>
                    <a href="./七牛云存储 - JavaScript SDK_files/七牛云存储 - JavaScript SDK.html" data-imagemogr="no-rotate" class="btn btn-default">
                        无旋转
                    </a>
                </div>
                <div class="text-warning">
                    备注：小图片水印效果不明显，建议使用大图片预览水印效果
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span>

            <a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a>
            <span class="pull-left">或</span>

            <a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>

            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
</div>




<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/bootstrap.min.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/plupload.full.min.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/zh_CN.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/ui.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/qiniu.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/highlight.js"></script>
<script type="text/javascript" src="./七牛云存储 - JavaScript SDK_files/main.js"></script>


</body></html>